<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
    .layui-input-block {
        width: 260px;
        height: 20px;
    }

    .layui-btn {
        margin-left: 600px;
        margin-top: 0px;
    }

    #layui-btn {
        margin-left: 730px;
        margin-top: -55px;
    }
</style>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item"><h1>入院查询</h1></div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名:</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required"
                       lay-reqtext="必填项不能为空" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">科室</label>
            <div class="layui-input-inline" style="width:260px">
                <select name="departName" lay-verify="required" lay-search="">
                    <option value="">请选择</option>
                    <option value="1">呼吸内科</option>
                    <option value="2">消化内科</option>
                    <option value="3">心内科</option>
                    <option value="4">血液科</option>
                    <option value="5">小儿科</option>
                    <option value="6">内分泌科</option>
                    <option value="7">神经内科</option>
                    <option value="8">感染科</option>
                    <option value="9">骨科</option>
                    <option value="10">神经外科</option>
                    <option value="11">肝胆外科</option>
                    <option value="12">烧伤科</option>
                    <option value="13">妇科</option>
                    <option value="14">产科</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">身份证号:</label>
            <div class="layui-input-block">
                <input type="text" name="idName" lay-verify="required"
                       lay-reqtext="必填项不能为空" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">病房号:</label>
            <div class="layui-input-block">
                <input type="text" name="roomId" lay-verify="required"
                       lay-reqtext="必填项不能为空" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">入院时间:</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">截止时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">床位号:</label>
            <div class="layui-input-block">
                <input type="text" name="bedId" lay-verify="required"
                       lay-reqtext="必填项不能为空" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="layui-btn">重置</button>
        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</form>

<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/jquery-1.12.2.min.js" type="text/javascript"></script>


<script>
    layui.use(['table', 'laydate', "laypage", "layer", 'carousel', 'upload', 'element', 'slider', 'layedit'], function () {
        var table = layui.table
            , laypage = layui.laypage//分页的组件
            , layer = layui.layer//弹框
            , laydate = layui.laydate//日期组件
            , element = layui.element;//元素的操作
        //常规用法 渲染那个时间框的！！！
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });

        //渲染table
        table.render({
            //找到table  id叫test的组件
            elem: '#test'
            , id: "transferTable"
            , url: 'http://localhost:8080/hospital/service/enter.do'
            , totalRow: true
            //这个很关键，就是解析 json数据库中数据的 一定要注意键值
            , cols: [[
                {field: 'idNumber', title: '身份证号', unresize: true, sort: true}
                ,{field: 'name', title: '姓名', edit: 'text'}
                ,{field: 'sex', title: '性别', edit: 'text'}
                ,{field: 'departName', title: '科室', unresize: true, sort: true}
                , {field: 'roomId', title: '病房号', sort: true}
                , {field: 'bedId', title: '床位号'}
                , {field: 'statusId', title: '入院情况'}
                , {field: 'enterTime', title: '入院时间'}
            ]]
            , page: true //分页开启
        });
        //搜索框有效果的情况
        var active = {
            reload: function () {
                //执行重载
                table.reload('transferTable', {
                    page: {
                        curr: 1   //重新从第 1 页开始
                    }
                    , where: {
                        //额外需要提交的参数
                        beginTime: $("#test1").val(),
                        endTime: $("#test2").val(),
                    }
                });
            }
        };

        $('.serchDiv .layui-btn').on('click', function () {
            var type = $(this).data('type');
            console.log(type)
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>

</html>